<template>
  <view>
    <u-navbar
      :is-fixed="true"
      :border-bottom="false"
      :is-back="true"
      back-icon-name="arrow-leftward"
      title="我的订单"
      back-icon-size="35"
      :background="{ background: '#fff' }"
      title-color="#000"
    >
    </u-navbar>
    <!--tab列表-->
    <!-- <u-tabs
      :list="list"
      :is-scroll="false"
      :current="current"
      @change="change"
    ></u-tabs> -->
    <u-toast ref="uToast" />
    <view class="bg-white zaiui-nav-tab-vie">
      <scroll-view
        scroll-x
        class="nav z"
        scroll-with-animation
        :scroll-left="tab_scroll"
      >
        <block v-for="(item, index) in nav_list" :key="index">
          <view
            class="cu-item cu-item-list"
            :class="index == tab_cur ? 'select' : ''"
            @tap="tabSelect"
            :data-id="index"
          >
            <view :class="index == tab_cur ? 'text-black' : ''">{{
              item.key
            }}</view>
            <view class="tab-dot bg-red" />
          </view>
        </block>
      </scroll-view>
    </view>

    <!--订单列表-->
    <block v-for="(item, index) in order_list" :key="index">
      <view class="bg-white zaiui-order-tab-view" @click="detailsTap(item)">
        <!--店铺名称-->
        <view class="shop-title-view flex">
          <image
            src="~@/static/images/logo.png"
            class="cu-avatar-logo"
            mode="widthFix"
          ></image>
          <!-- <view class="cu-avatar sm round cu-avatar-logo" /> -->
          <view class="text-black text-cut shop-name"
            >订单号:{{ item.id }}</view
          >
          <template v-if="tab_cur == 3">
            <text class="text-right text-gray text-sm">已退款</text>
          </template>
          <template v-else-if="tab_cur == 4">
            <text class="text-right text-gray text-sm">已取消</text>
          </template>
          <template v-else>
            <text
              class="text-right text-gray text-sm"
              v-if="item.payStatus == 3"
              >已退款</text
            >
            <text
              class="text-right text-gray text-sm"
              v-else-if="item.payStatus == 4"
              >已取消</text
            >
            <text
              class="text-right text-gray text-sm"
              v-else-if="item.verifyStatus != -1"
              >{{ nav_listObj[item.verifyStatus] }}</text
            >
          </template>
        </view>
        <!--商品列表-->
        <block v-for="(items, indexs) in item.commodityList" :key="indexs">
          <view class="goods-list-view">
            <view
              class="cu-avatar lg radius"
              :style="[
                {
                  backgroundImage: 'url(' + items.fileUrl + ')',
                },
              ]"
            />
            <view class="goods-info-view">
              <view class="text-black text-cut name">{{ items.title }}</view>
              <view class="text-gray text-sm text-cut introduce"
                >{{ items.article }}{{ items.description }}</view
              >
              <!-- <view class="text-cut tag-view" style="visibility: hidden">
                <block v-for="(items_s, index_s) in items.tag" :key="index_s">
                  <text class="cu-tag sm line-blue radius">{{ items_s }}</text>
                </block>
              </view> -->
              <view class="text-price text-red">{{ items.price }}</view>
            </view>
          </view>
        </block>
        <!--统计-->
        <view class="statistics-view">
          <view class="text-black text-sm text-right">
            <!-- <text>共{{ item.num }}件</text> -->
            <!-- <text v-if="item.type == 1">商品 实付款：</text>
			<text v-if="item.type == 0">商品 应付款：</text> -->
            <text>商品 应付款：</text>
            <text class="text-price text-lg">{{
              item.commodityList[0].price
            }}</text>
          </view>
        </view>
        <!--按钮-->
        <view class="zaiui-btn-view">
          <button
            class="cu-btn line-black radius"
            @click.stop="cancelOrderHandle(item)"
            v-if="item.verifyStatus == 0 && (item.payStatus != 3 && item.payStatus != 4)"
          >
            取消订单
          </button>
          <button
            class="cu-btn bg-blue radius"
            @click.stop="detailsTap(item)"
            style="background: #0081ff"
            v-if="item.verifyStatus == 0 && (item.payStatus != 3 && item.payStatus != 4)"
          >
            立即核销
          </button>
          <button
            class="cu-btn bg-blue radius"
            @click.stop="backMoney(item)"
            style="background: #0081ff"
            v-if="item.type == 2 && item.verifyStatus == 1 && (item.payStatus != 3 && item.payStatus != 4)"
          >
            申请退押金
          </button>
        </view>
      </view>
    </block>

    <!--无数据-->
    <view class="bg-white zaiui-null-view" v-if="!order_list.length">
      <view class="img-view">
        <image
            style="width: 80%;margin: auto;display: block;"
            src="~@/static/zaiui/img/are.png"
            mode="widthFix"
          />
      </view>
      <view class="text-sm margin-top-sm">您还没有相关订单哦</view>
    </view>

    <!--到底了-->
    <view class="zaiui-foot-tip-view" v-if="order_list.length">
      
      <view class="text-gray">hi,到底啦~</view>
    </view>

    <!--小程序端显示-->
    <!-- #ifdef MP -->
    <!--编辑-->
    <!-- <view class="zaiui-add-btn-view-box" @tap="barEditTap">
      <button class="cu-btn cuIcon-check bg-red" v-if="goods_checked"></button>
      <button class="cu-btn cuIcon-write bg-red" v-else></button>
    </view> -->
    <!-- #endif -->
  </view>
</template>

<script>
import _sort_grid from "@/static/zaiui/data/order_list.js"; //虚拟数据
import _tool from "@/static/zaiui/util/tools.js";
export default {
  data() {
    return {
      bg_img: "/static/images/logo.png",
      sort_grid_data: [],
      nav_list: [],
      tab_cur: 0,
      tab_scroll: 0,
      order_list: [],
      goods_checked: false,
      queryForm: {
        current: 1,
        /**
         * 下单手机号
         */
        phone: "",
        size: 999,
        /**
         * 订单类型 1买断 2租赁
         */
        type: "",
        /**
         * 核销状态 0待核销 1已核销 2已归还
         */
        verifyStatus: "",
        /**
         * 支付状态  3已退款 4已取消
         */
        payStatus: "",
      },
      list: [
        {
          name: "租赁",
        },
        {
          name: "购买",
        },
        // {
        //   name: "待评价",
        //   count: 5,
        // },
      ],
      current: 0,
      nav_listObj: {},
    };
  },
  onLoad() {
  
  },
  onShow(){
    this.sort_grid_data = _sort_grid.sortGridData();
    // this.order_list = _sort_grid.orderListData();
    this.nav_list = _sort_grid.navListData();
    this.nav_list.map((item) => {
      this.nav_listObj[item.value] = item.key;
    });
    this.getData();
  },
  onReady() {
    _tool.setBarColor(true);
    uni.pageScrollTo({
      scrollTop: 0,
      duration: 0,
    });
  },
  methods: {
    backMoney(item) {
      //   this.$refs.uToast.show({
      //     title: "归还物品时,请提供手机号码由平台统一退款",
      //     type: "success",
      //   });
      uni.showModal({
        title: "温馨提示",
        content:
          "请归还物品时告知工作人员下单手机号码[" +
          item.phone +
          "]，押金从平台统一退款",
        showCancel: false,
      });
    },
    cancelOrderHandle({ id }) {
      uni.showModal({
        title: "提示",
        content: "即将取消订单，是否继续",
        success: (res) => {
          if (res.confirm) {
            let params = {
              id,
            };
            this.$u.api
              .cancelOrder(params)
              .then((res) => {
                console.log(res);
                let { success } = res;
                if (success) {
                  this.$refs.uToast.show({
                    title: "取消成功",
                    type: "success",
                  });
                  this.getData();
                }
              })
              .catch(() => {});
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    change(index) {
      this.current = index;
      this.getData();
    },
    getData() {
      let params = {
        ...this.queryForm,
      };
     // params.type = this.current ? "1" : "2";
      params.verifyStatus =
        this.nav_list[this.tab_cur].value == -1
          ? ""
          : this.nav_list[this.tab_cur].value;
      console.log(params);
      if (params.verifyStatus == 13 || params.verifyStatus == 14) {
        params.payStatus = params.verifyStatus - 10;
        params.verifyStatus = "";
      }
      this.$u.api
        .getOrderList(params)
        .then((res) => {
          let {
            data: { records },
          } = res;
          this.order_list = records.filter((i) => i.verifyStatus != -1) || [];
          console.log(this.order_list);
        })
        .catch(() => {});
    },
    tabSelect(e) {
      let index = e.currentTarget.dataset.id;
      this.tab_cur = index;
      this.tab_scroll = (index - 1) * 60;
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 0,
      });
      this.getData();
    },
    barEditTap() {
      if (this.goods_checked) {
        this.goods_checked = false;
      } else {
        this.goods_checked = true;
      }
    },
    whereaboutsTap() {
      uni.navigateTo({
        url: "/pages/order/whereabouts",
      });
    },
    appraiseTap() {
      uni.navigateTo({
        url: "/pages/order/view_appraise",
      });
    },
    detailsTap({ id }) {
      uni.navigateTo({
        url: "/pages/order/details?id=" + id,
      });
    },
  },
};
</script>

<style lang="scss">
/* #ifdef APP-PLUS */
@import "../../static/colorui/main.css";
@import "../../static/colorui/icon.css";
@import "../../static/zaiui/style/app.scss";
/* #endif */
@import "../../static/zaiui/style/order-list.scss";
.cu-avatar-logo {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
}
.cu-item-list {
  width: 18%;
  text-align: center;
  // margin: 0 80rpx;
}
</style>
